@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	#tree{width:100vw;height: auto;position: absolute;margin: 0 auto;z-index: 99;transform: translateX(-12.5vw);}
.left{display: none;}
.top{height: 4vh;overflow: hidden;}
.media{clear: both;transform: translateX(10vw) scale(1.82,1) ;}
.media p,.media a,.media h2,.media svg,.media li{transform: scale(1,1.81);}
#g1{transform: translateY(80px);}
#g2{transform: translateY(250px);}
#g3{transform: translateY(420px);}
}
@media only screen and (min-device-width : 960px) {#tree{width:55vw;height: auto;position: absolute;margin: 0 auto;z-index: 99;}}
@font-face{
	font-family: 'ops';
	src:url('./OPS.ttf');
}
*{margin: 0;padding: 0;font-family: "ops";transition: background-color 0.4s linear 0s,width 0.4s linear 0s,color 0.4s linear 0s,background 0.4s linear 0s,opacity 3s ease-in 0s;}

body{
	overflow: hidden;
	background-color: #262626;
	background-image: url(../img/zpba.png);
	background-size: 100vw 92vh;
	background-position:bottom;
}
.top{
	width: 100vw;
	height: 8vh;
	background-color: #262626;
	box-shadow:  -0.3125rem 0.3125rem 0.3125rem rgba(0,0,0,0.2),
				 0.3125rem -0.3125rem 0.3125rem rgba(0,0,0,0.2);
}
.top>a{
	float: left;
	margin: 0px 1.25rem;
	font-family: 'ops';
	height: 4.6875rem;
	line-height: 4.6875rem;
	color: #f2f2f2;
	font-size: 1.375rem;
	text-decoration: none;
}
#tfirst{
	margin: 0.625rem 0.625rem 0 0.625rem ;
}
#tsecond{
	float: right;
}
#tthird{
	float: right;
	margin: 0px 1.25rem 0px 5rem;
}
.content{
	position: absolute;
	transform: translateX(12.5vw);
	height: 92vh;
		width: 65vw;
}
.content:after {
            content: "";
            clear: left;
            display: block;
        }
.media{
	overflow-y: scroll;
	height: 92vh;
	float: left;
	margin: 0 auto;
	width: 55vw;
	background-color: #262626;
	background-image: linear-gradient(180deg, #1d1e5c 40%, #30c9cd 100%);
	background-size: 150% 150%;
	background-position: center;

}
.media::-webkit-scrollbar {
    display: none;
}
.media1{
	overflow: hidden;
	position: relative;
	height: 92vh;
	width: 55vw;
	margin: 0 auto;
	background-color: white;
}
#tree{height: auto;position: absolute;margin: 0 auto;z-index: 99;}
.left{
	position: relative;
	transform: translateY(2.5vh);
	float: left;
	width: 10vw;
}
.left #l{
	overflow: hidden;
	height: 5vh;
	width: 10vw;
	border-radius:0.125rem 0 0 1.5625rem;
	background: rgba(38,38,38,0);
	box-shadow:  -0.3125rem 0.3125rem 0.3125rem rgba(0,0,0,0.2), 
				 0.3125rem -0.3125rem 0.3125rem rgba(0,0,0,0.2);
	margin-bottom: 2.5vh;
}
.left .lc{
	border-radius:0 1.5625rem 0.125rem 0;
	display: inline-block;
	width: 4vw;
	height: 3.125rem;
}
#lc3{width: 12vw;}
.lc#lc1{
	background: #262626;
}
#al1:hover>#l>#lc1{width: 10vw;}
.lc#lc2{
	background: #4d0500;
}
#al2:hover>#l>#lc2{width: 10vw;}

.lc#lc3{
	background: #1d1e5c;
}
#al3:hover>#l>#lc3{width: 10vw;}
.lc#lc4{
	background: #003000;
}
#al4:hover>#l>#lc4{width: 10vw;}
.lc#lc5{
	background: #002a45;
}
#al5:hover>#l>#lc5{width: 10vw;}
.lc#lc6{
	background: #3d0c4f;
}
#al6:hover>#l>#lc6{width: 10vw;}
.left p{
	position: fixed;
	color: #f2f2f2;
	margin: -5.5vh 0 0 5vw;
	font-size: 1.1vw;
	vertical-align:middle;
	line-height: 5vh;
	height: 5vh;
}
.top a:hover{
	color: #2fc7cc;
}

.grid {
	height: 380px;
	padding: 2%;
	overflow: hidden;
	margin: 0;
	width: 100%;
	list-style: none;
	text-align: center;
}

.grid figure {
	box-shadow:  -0.3125rem 0.3125rem 0.3125rem rgba(0,0,0,0.2),
				 0.3125rem -0.3125rem 0.3125rem rgba(0,0,0,0);
	border-radius: 0 20px 20px 20px;
	margin: 0 4% 30px 0;
	position: relative;
	display: inline-block;
	overflow: hidden;
	background: #3085a3;
	text-align: center;
	cursor: pointer;
}
#t3x2{	width: 53%;height: 380px;}
#t2x1{	width: 35%;height: 175px;}
#t1x2{  width: 15%;height: 380px;}
#t2x2{  width: 35%;height: 380px;}
.grid figure img {
	position: relative;
	display: block;
	opacity: 0.8;
	width:100%;
	height: 100%;
}

.grid figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.grid figure a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h2 {
	word-spacing: -0.15em;
	
	font-weight: 300;
}

.grid figure h2 span {
	font-weight: 800;
}

.grid figure h2,
.grid figure p {
	margin: 0;
}

.grid figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}


/*---------------*/
/***** Dexter *****/
/*---------------*/
#t3x2 {
	background: linear-gradient(to bottom, rgba(48,201,205,1) 0%,rgba(51,13,105,1) 100%); 
}

#t3x2 img {
	opacity:0.2;
	transition: opacity 0.35s;
}

#t3x2:hover img {
	opacity: 0.8;
}

#t3x2 figcaption::after {
	position: absolute;
	right: 30px;
	left: 10px;
	bottom: 65%;
	height: calc(20% - 30px);
	width: 62%;
	border: 7px solid #fff;
	content: '';
	transition: transform 0.35s;
	transform: translate3d(0,-100%,0);
	border-radius: 10px;
}

#t3x2:hover figcaption::after {
	background-color: rgba(242,242,242,0.5);
	height: calc(40% - 30px);
	transform: translate3d(0,100%,0);
}

#t3x2 figcaption {
	padding: 1em;
	text-align: left;
}

#t3x2 p {
	z-index: 99;
	width: 58%;
	font-size: 1.1875rem;
	position: absolute;
	right: 60px;
	bottom: 35%;
	left: 30px;
	opacity: 0;
	transition: opacity 0.35s, transform 0.35s;
	transform: translate3d(0,-100px,0);
}

#t3x2:hover p {
	color: #262626;
	opacity: 1;
	transform: translate3d(0,-100%,0);
}


/* 2x1 */

#t2x1 {
	background: linear-gradient(to bottom, rgba(48,201,205,1) 0%,rgba(51,13,105,1) 100%); 
}

#t2x1 img {
	opacity:0.2;
	transition: opacity 0.35s;
}

#t2x1:hover img {
	opacity: 0.8;
}

#t2x1 figcaption::after {
	
	position: absolute;
	right: 30px;
	left: 10px;
	bottom: 46%;
	height: calc(30% - 30px);
	width: 70%;
	border: 7px solid #fff;
	content: '';
	transition: transform 0.35s;
	transform: translate3d(0,-100%,0);
	border-radius: 10px;
}

#t2x1:hover figcaption::after {
	background-color: rgba(242,242,242,0.5);
	height: calc(30% - 30px);
	transform: translate3d(0,80%,0);
}

#t2x1 figcaption {
	padding: 1em;
	text-align: left;
}

#t2x1 p {
	font-size: 1.1875rem;
	z-index: 99;
	position: absolute;
	right: 60px;
	bottom: 45%;
	left: 30px;
	opacity: 0;
	transition: opacity 0.35s, transform 0.35s;
	transform: translate3d(0,-100px,0);
}

#t2x1:hover p {
	color: #262626;
	opacity: 1;
	transform: translate3d(0,100%,0);
}

/* 1x2 */

#t1x2 {
	background: linear-gradient(to bottom, rgba(48,201,205,1) 0%,rgba(51,13,105,1) 100%); 
}

#t1x2 img {
	opacity:0.2;
	transition: opacity 0.35s;
}

#t1x2:hover img {
	opacity: 0.8;
}

#t1x2 figcaption::after {
	
	position: absolute;
	right: 30px;
	left: 8px;
	bottom: 46%;
	height: calc(30% - 30px);
	width: 68%;
	border: 4px solid #fff;
	content: '';
	transition: transform 0.35s;
	transform: translate3d(0,-100%,0);
	border-radius: 10px;
}

#t1x2:hover figcaption::after {
	background-color: rgba(242,242,242,0.5);
	height: 48%;
	width: 40%;
	transform: translate3d(52%,50%,0);
}

#t1x2 figcaption {
	padding: 1em;
	text-align: left;
}

#t1x2 p {
	
	writing-mode:vertical-rl;
	font-size: 1.1875rem;
	z-index: 99;
	position: absolute;
	right: 60px;
	bottom: 45%;
	left: 30px;
	opacity: 0;
	transition: opacity 0.35s, transform 0.35s;
	transform: translate3d(0,-100px,0);
}

#t1x2:hover p {
	color: #262626;
	opacity: 1;
	transform: translate3d(0,50%,0);
}

/* 2x2 */

#t2x2 {
	background: linear-gradient(to bottom, rgba(48,201,205,1) 0%,rgba(51,13,105,1) 100%); 
}

#t2x2 img {
	opacity:0.2;
	transition: opacity 0.35s;
}

#t2x2:hover img {
	opacity: 0.8;
}

#t2x2 figcaption::after {
	position: absolute;
	right: 30px;
	left: 10px;
	bottom: 65%;
	height: calc(20% - 30px);
	width: 62%;
	border: 7px solid #fff;
	content: '';
	transition: transform 0.35s;
	transform: translate3d(0,-100%,0);
	border-radius: 10px;
}

#t2x2:hover figcaption::after {
	background-color: rgba(242,242,242,0.5);
	height: calc(40% - 30px);
	transform: translate3d(0,100%,0);
}

#t2x2 figcaption {
	padding: 1em;
	text-align: left;
}

#t2x2 p {
	z-index: 99;
	width: 58%;
	font-size: 1.1875rem;
	position: absolute;
	right: 60px;
	bottom: 35%;
	left: 30px;
	opacity: 0;
	transition: opacity 0.35s, transform 0.35s;
	transform: translate3d(0,-100px,0);
}

#t2x2:hover p {
	color: #262626;
	opacity: 1;
	transform: translate3d(0,-30%,0);
}
@media screen and (max-width: 69.5em) {
	.grid figure {
		width: 50%;
	}	

	.grid figure figcaption {
		font-size: 90%;
	}
}


@media screen and (max-width: 41.5em) {

	.grid figure {
		width: 100%;
	}
}